在将视图模型添加到项目之前，请添加对 MVVM 社区工具包的引用。 此库在 NuGet 上可用，并提供有助于实现 MVVM 模式的类型和系统。

在 Visual Studio 的“解决方案资源管理器”窗格中，右键单击“注释”项目>“”管理 NuGet 包”。

选择“浏览”选项卡。

搜索 communitytoolkit mvvm 并选择 CommunityToolkit.Mvvm 包，这应该是第一个结果。

请确保至少选择了版本 8。 本教程是使用版本 8.0.0 编写的。

接下来，选择“ 安装 ”并接受显示的任何提示。

现在，你已准备好通过添加视图模型开始更新项目。

view-to-viewmodel 关系严重依赖于 .NET 多平台应用 UI (.NET MAUI) 提供的绑定系统。 应用已在视图中使用绑定来显示备注列表并显示单个笔记的文本和日期。 应用逻辑当前由视图的代码隐藏提供，并且直接绑定到视图。 例如，当用户编辑笔记并按 “保存” 按钮时， Clicked 将引发按钮的事件。 然后，事件处理程序的代码隐藏会将笔记文本保存到文件并导航到上一个屏幕。

视图更改时，在视图的代码隐藏中设置应用逻辑可能会成为一个问题。 例如，如果按钮替换为其他输入控件，或者控件的名称已更改，事件处理程序可能会变得无效。 无论视图的设计方式如何，视图的用途都是调用某种应用逻辑并向用户显示信息。 对于此应用， Save 按钮保存笔记，然后导航回上一个屏幕。

viewmodel 为应用提供了一个放置应用逻辑的特定位置，而不考虑 UI 的设计方式或数据的加载或保存方式。 viewmodel 是代表视图表示数据模型并与之交互的粘附。

视图模型存储在 ViewModels 文件夹中。

项目结构应如下图所示：

“ 关于”视图 在屏幕上显示一些数据，并可以选择导航到包含详细信息的网站。 由于此视图没有任何数据要更改，例如文本输入控件或从列表中选择项，因此最好演示如何添加 viewmodel。 对于 “关于”视图模型，没有后备模型。

创建 关于视图模型：

在 Visual Studio 的“解决方案资源管理器”窗格中，双击“ViewModels\AboutViewModel.cs”。

粘贴以下代码。

前面的代码片段包含一些属性，这些属性表示有关应用的信息，例如名称和版本。 此代码片段与之前删除的 “关于”模型 完全相同。 但是，此 viewmodel 包含一个新概念，即 ShowMoreInfoCommand 命令属性。

命令是可调用代码的可绑定操作，是放置应用逻辑的绝佳位置。 在此示例中， 指向 ShowMoreInfoCommandShowMoreInfo 方法，该方法将 Web 浏览器打开到特定页面。 你将在下一节中详细了解命令系统。

需要稍微更改 “关于”视图 ，将其挂接到在上一节中创建的 viewmodel。 在 Views\AboutPage.xaml 文件中，应用以下更改：

更新“ 关于”视图：

在 Visual Studio 的“解决方案资源管理器”窗格中，双击“视图”\“AboutPage.xaml”。

粘贴以下代码。

前面的代码片段突出显示了在此视图中已更改的行。

请注意，按钮正在使用 Command 属性。 许多控件都有一个 Command 属性，当用户与控件交互时会调用该属性。 与按钮一起使用时，当用户按下按钮时会调用 命令，类似于事件处理程序的 Clicked 调用方式，只是你可以绑定到 Command viewmodel 中的属性。

在此视图中，当用户按下按钮时， Command 将调用 。 绑定到 CommandShowMoreInfoCommand viewmodel 中的 属性，调用时，在 方法中 ShowMoreInfo 运行代码，这将打开 Web 浏览器到特定页面。

按钮 ShowMoreInfo 未使用事件处理程序，因此 LearnMore_Clicked 应从 Views\AboutPage.xaml.cs 文件中删除代码。 删除该代码，类应仅包含 构造函数：

在 Visual Studio 的“解决方案资源管理器”窗格中，双击“视图”\“AboutPage.xaml.cs”。

提示

可能需要展开 Views\AboutPage.xaml 以显示文件。

将代码替换为以下代码片段：

浏览本教程的此步骤的代码。